/* Social icon sizes and spacing mapped to tokens */
.c-social-icons {
  container-type: inline-size;
  margin: var(--space-5) 0;
  text-align: center;

  a {
    display: inline-block;
    position: relative;
  }

  img {
    height: var(--space-7);
    margin: 0 var(--space-2);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--easing-standard);
    vertical-align: middle;
    width: var(--space-7);

    &.is-loaded {
      opacity: 1;
    }

    &[alt='CSDN logo'],
    &[alt='Medium logo'] {
      filter: var(--social-icon-filter);
    }
  }

  .c-spinner {
    --spinner-size: var(--space-7);
    --spinner-color: var(--color-spinner);
  }

  @container (max-width: 30rem) {
    img {
      height: var(--space-6);
      width: var(--space-6);
    }

    .c-spinner {
      --spinner-size: var(--space-6);
    }
  }
}

/* Modal overlay for WeChat QR code */
.c-modal {
  align-items: center;
  background: var(--overlay-modal-bg);
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 1000;
}

.c-modal-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: center;
}

.c-modal-content .c-modal-close {
  align-self: flex-end;
  cursor: pointer;
}
